<template>
    <div class="container">
        <el-page-header class="go-back" @back="goBack" content="返回"></el-page-header>

        <div class="order">
            <div style="float: left;width: 100%">
                <el-divider content-position="left">订单信息</el-divider>
            </div>

            <div class="item">
                <div class="item-left">订单创建时间</div>
                <div class="item-right">{{orderDetail.createTime}}</div>
            </div>
            <div class="item">
                <div class="item-left">店铺名称</div>
                <div class="item-right">{{orderDetail.shopName}}</div>
            </div>
            <div class="item">
                <div class="item-left">支付状态</div>
                <div class="item-right">
                    <span v-if="orderDetail.state == 1" style="color: red;font-weight: bold">未支付</span>
                    <span v-if="orderDetail.state == 2">已支付</span>
                    <span v-if="orderDetail.state == 3">已确认</span>
                    <span v-if="orderDetail.state == 4">已退款</span>
                    <span v-if="orderDetail.state == 5">-已取消</span>
                </div>
            </div>
            <div style="float: left;width: 100%">
                <el-divider content-position="left" >商品信息</el-divider>
            </div>

            <div class="item" v-for="(item,index) in orderDetail.lineItems" :key="index">
                <div class="item-left">{{item.itemName}}&nbsp;&nbsp; x &nbsp;&nbsp;{{item.count}}</div>
                <div class="item-right">{{item.price}}</div>
            </div>
            <div style="float: left;width: 100%">
                <el-divider content-position="left">订单总价</el-divider>
            </div>
            <div class="item" style="margin-bottom: 100px">
                <div class="item-left">订单总价</div>
                <div class="item-right" style="color: red;font-weight: bold">{{orderDetail.price}}</div>
            </div>

            <el-row style="text-align: center;">
                <el-button v-if="orderDetail.state == 1" @click="cancelOrder()">取消订单</el-button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" v-if="orderDetail.state == 1" @click="payOrder()">支付订单</el-button>
            </el-row>

        </div>

    </div>
</template>

<script>
    import {cancelOrder, orderDetail,userCancelOrder,userPayOrder} from '../../../api/common'
    export default {
        name: "OrderDetail",
        data() {
            return {
                user: {},
                orderDetail:{},
            }
        },
        created() {
            let userJson = localStorage.getItem('bus-user');
            if (userJson) {
                let user = JSON.parse(userJson);
                this.user = user
            } else {
                this.$message.info("请您重新登陆")
            }
            let orderNo = this.$route.query.orderNo
            if (orderNo) {
                let param = {
                    orderNo:orderNo
                }
                this.queryOrder(param)

            } else {
                this.$message.info("无订单数据，请重新下单")
                this.$router.push("/shopList")
            }
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            queryOrder(param){
                orderDetail(param).then(res => {
                    if (res.code == 200){
                        this.orderDetail = res.data
                    } else {
                        this.$message.info("查询订单数据失败")
                    }
                })
            },
            cancelOrder(){
                this.$confirm('是否确定取消订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '再想想',
                    type: ''
                }).then(() => {
                    let param = {
                        orderNo: this.orderDetail.orderNo
                    }
                    userCancelOrder(param).then(res => {
                        if (res.code == 200) {
                            this.queryOrder(param)
                            this.$message.success("订单取消成功")
                        }else {
                            this.$message.error(res.msg || "订单取消失败")
                        }
                    })
                })
            },
            payOrder(){
                this.$confirm('是否确定支付订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '再想想',
                    type: ''
                }).then(() => {
                    let param = {
                        orderNo: this.orderDetail.orderNo
                    }
                    userPayOrder(param).then(res => {
                        if (res.code == 200) {
                            this.queryOrder(param)
                            this.$message.success("订单支付成功")
                        }else {
                            this.$message.error(res.msg || "订单支付失败")
                        }
                    })
                })
            }

        }
    }
</script>

<style scoped>
    .container {
        width: 70%;
        min-height: 100%;
        height: auto;
        margin-left: 15%;
        background-color: #ffffff;
        position: absolute;
    }
    .go-back {
        margin-left: 10%;
        margin-top: 30px;
    }
    .order{
        width: 100%;
        height: auto;
        float: left;
        margin-top: 50px;
    }
    .item{
        float: left;
        width: 100%;
    }
    .item-left{
        width: calc(50% - 40px);
        float: left;
        height: 50px;
        line-height: 50px;
        padding-left: 40px;
        font-size: 20px;
    }
    .item-right{
        height: 50px;
        line-height: 50px;
        width: calc(50% - 40px);
        float: left;
        padding-right: 40px;
        text-align: right;
    }

</style>